<template>
    <div>
        <el-skeleton style="width:100vw">
            <template #template>
                <el-skeleton-item variant="image" style="width: 94%; height: 330px;margin: 0 auto;margin-top: 10px;" />
                <div style="padding: 14px">
                    <el-skeleton-item variant="p" id="grid" />
                    <div>
                        <el-skeleton-item variant="text" style="width: 40%;height: 25px;" />
                        <ul style="display: flex;justify-content: space-between;">
                            <li><el-skeleton-item variant="text" style="width: 50px;height: 25px;" /></li>
                            <li><el-skeleton-item variant="text" style="width: 50px;height: 25px;" /></li>
                            <li><el-skeleton-item variant="text" style="width: 50px;height: 25px;" /></li>
                            <li><el-skeleton-item variant="text" style="width: 50px;height: 25px;" /></li>
                            <li><el-skeleton-item variant="text" style="width: 50px;height: 25px;" /></li>
                        </ul>
                        <div id="hot">
                            <el-skeleton-item variant="text" id="hot_item" />
                            <el-skeleton-item variant="text" id="hot_item" />
                        </div>
                        <el-skeleton-item variant="text" style="width: 40%;height: 25px;" />
                        <div id="fangdong">
                            <el-skeleton-item id="fsitem" variant="text"/>
                            <el-skeleton-item id="fsitem" variant="text" />
                            <el-skeleton-item id="fsitem" variant="text" />
                            <el-skeleton-item id="fsitem" variant="text" />
                            <el-skeleton-item id="fsitem" variant="text" />
                        </div>
                    </div>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
#grid {
    width: 100%;
    height: 70px;
}

#hot {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: space-between;
}

#hot_item {
    width: 48%;
    height: 200px;
}

#fangdong {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* background-color: pink; */
}
#fsitem{
    width: 48%;
    height: 180px;
    margin-top: 10px;
}
</style>